<template>
	<view class="page">
		<!-- 搜索框 -->
		<view class="search-box">
			<u-search placeholder="请输入订单编号搜索" v-model="keyword" shape="square" :clearabled="true" :show-action="true"
				action-text="搜索" :animation="true" :action-style="actionstyle" @custom="doSearch" @search="doSearch" bg-color="#ffffff"> </u-search>
		</view>
		
		<!-- 数量统计 -->
		<view class="saixuanbox">
			<view class="">
				<text style="font-size: 24px;">{{totalSize}}</text><text style="margin-left: 5px;">条</text>
			</view>
			<view class="saixuanbox-left">
				<!-- 可以根据需要添加筛选按钮 -->
			</view>
		</view>
		
		<!-- 列表区域 -->
		<mescroll-uni :fixed="false" @init="mescrollInit" :height="height" :down="downOption" @down="downCallback"
			:up="upOption" @up="upCallback" @emptyclick="emptyClick">
			<view class="order-item" v-for="(item, index) in orders" :key="index" @click="selectOrder(item)">
				<view class="order-top">
					<view class="order-count">
						可划拨数量：<text class="count-num">{{item.num}}</text>
					</view>
				</view>
				<view class="order-title">
					{{item.title}}
				</view>
				<view class="order-info">
					<view class="info-label">所属订单</view>
					<view class="info-value">{{item.sysOrderNo}}</view>
				</view>
				<!-- <view class="order-info">
					<view class="info-label">返现截止日期</view>
					<view class="info-value">{{item.createDate}}</view>
				</view> -->
			</view>
		</mescroll-uni>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	const api = require('../../config/api');
	const util = require('../../utils/util');
	
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				downOption: {
					auto: true // 自动加载
				},
				upOption: {
					auto: false, // 不自动加载
					noMoreSize: 4,
					textLoading: '加载中 ...', // 加载中的提示文本
					textNoMore: '暂无更多', // 没有更多数据的提示文本
					empty: {
						tip: '暂无订单数据', // 提示
					},
				},
				orders: [],
				keyword: '',
				// 用于计算mescroll高度
				searchBoxHeight: 56, // 搜索框高度(px)
				searchTimer: null, // 搜索防抖计时器
				totalSize: 0,
				actionstyle: {
					color: '#2F6DFE',
					fontSize: '14px'
				}
			}
		},
		onLoad(option) {
			const eventChannel = this.getOpenerEventChannel();
			eventChannel.on('SelectOrder', (data) => {
				uni.setNavigationBarTitle({
					title: data.data
				})
			})
		},
		methods: {
			// 初始化mescroll，设置高度减去搜索框
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
				// 使用固定高度，避免DOM选择器错误
				setTimeout(() => {
					// 设置mescroll高度减去搜索框和统计条高度
					this.mescroll.setClientHeight(this.mescroll.getClientHeight() - uni.upx2px(180));
				}, 200);
			},
			/* 下拉刷新的回调 */
			downCallback() {
				this.mescroll.resetUpScroll()
			},
			/* 上拉加载的回调 */
			upCallback(page) {
				let pageNum = page.num; // 页码, 默认从1开始
				let pageSize = page.size; // 页长, 默认每页10条
				
				// 构建查询参数
				let params = {
					page: pageNum,
					limit: pageSize
				};
				
				// 添加搜索关键词
				if(this.keyword) {
					params.keyword = this.keyword;
				}
				console.log(params);
				
				util.request(
					api.terminalAllocationOrderUrl,
					params,
					'POST'
				).then(res => {
					console.log(res);
					// 联网成功的回调，隐藏下拉刷新和上拉加载的状态
					let totalSize = res.data.total;
					// 处理接口返回的是rows而非records
					let records = res.data.rows || [];
					this.mescroll.endBySize(records.length, totalSize);
					// 设置列表数据
					if (page.num == 1) this.orders = []; // 如果是第一页需手动制空列表
					this.orders = this.orders.concat(records); // 追加新数据
					this.totalSize = totalSize;
				}).catch(() => {
					// 联网失败, 结束加载
					this.mescroll.endErr();
				})
			},
			// 选择订单
			selectOrder(item) {
				const eventChannel = this.getOpenerEventChannel();
				eventChannel.emit('selectOrderDate', {
					item: item
				});
				uni.$emit('selectOrderDate', {
					item: item
				});
				uni.navigateBack();
			},
			// 点击空布局按钮的回调
			emptyClick() {
				uni.showToast({
					title: '暂无订单数据',
					icon: 'none'
				})
			},
			// 执行搜索
			doSearch() {
				console.log('搜索关键词:', this.keyword);
				this.mescroll.resetUpScroll(); // 重置列表并加载第一页
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		background-color: #F7F7F7;
		padding: 0;
		height: 100%;
		box-sizing: border-box;
	}
	
	.search-box {
		padding: 10px;
		box-sizing: border-box;
		background-color: #F7F7F7;
	}
	
	.saixuanbox {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 0 15px;
		color: #000;
		font-size: 16px;
	}
	
	.saixuanbox-left {
		display: flex;
		align-items: center;
	}
	
	.order-item {
		background-color: #FFFFFF;
		border-radius: 10px;
		padding: 15px;
		margin: 8px 15px;
		width: calc(100% - 30px);
		box-sizing: border-box;
	}
	
	.order-top {
		display: flex;
		align-items: center;
		margin-bottom: 12px;
	}
	
	.order-count {
		color: #333333;
		font-size: 14px;
	}
	
	.count-num {
		font-size: 42rpx;
		color: #2F6DFE;
		font-weight: bold;
	}
	
	.order-title {
		font-size: 16px;
		font-weight: bold;
		color: #333333;
		margin-bottom: 15px;
		word-break: break-all;
	}
	
	.order-info {
		display: flex;
		margin-top: 10px;
		font-size: 14px;
		color: #666666;
	}
	
	.info-label {
		width: 90px;
		color: #999999;
		flex-shrink: 0;
	}
	
	.info-value {
		display: flex;
		justify-content: right;
		flex: 1;
		color: #333333;
		word-break: break-all;
	}
</style> 